<template>
  <div class="home-container">
    <!-- 顶部介绍区域 -->
    <div class="hero-section">
      <h1>XIN计划</h1>
      <div class="description">
        <p>《XIN计划》是一款深受玩家喜爱的回合制竞技养成类游戏,自20‌25在日本发售以来。凭借探险养成、精灵对战和社区交流等玩法，以机器人"XIN"探索宇宙的过程中，与各种精灵之间发生的曲折离奇的故事为背景。以"我们的游戏正在XINXIN向荣"为口号，为一代孩子们留下了珍贵又美好的回忆。</p>
        <p>游戏内玩法丰富且多彩，小XIN们可以收集各种精灵，并进行培养和战斗。精灵拥有不同的属性和技能，小XIN需要根据战斗需求合理搭配和应用。
每个人的童年都曾有这样一款游戏，时代不同，童年里的游戏也都会不同。在那个充满童趣与幻想的年代，XIN计划就像一颗璀璨的星辰，照亮了我们纯真的童年，怀揣着一颗探索未知的心，我们踏上了星际冒险之旅。</p>
        <p>XIN计划的社区活跃度极高，玩家可以分享自己的游戏策略、制作视频教程，并参与各种线上活动。无论是新手还是资深玩家，都能在XIN计划中找到属于自己的乐趣。</p>
      </div>
      
      <div class="links">
        <div class="buttons">
          <el-button type="primary" @click="router.push('/game')">开始游戏</el-button>
        </div>
        <p class="link-item">
            <span>更多话题和攻略，请访问 </span>
            <el-link style="font-size: 16px;" href="https://seerxin.com/url/group">XIN计划XIN服频道</el-link>
        </p>
        <p class="link-item">
            <span>友链：约瑟传说星火计划</span>
            <el-link style="font-size: 16px;" href="https://seerxin.com/url/seer2">点击我开始游戏</el-link>
        </p>
      </div>
    </div>

    <!-- 功能区域 -->
    <div class="features-grid">
      <!-- 用户中心 -->
      <div class="feature-card">
        <h2>用户中心</h2>
        <p>用户中心可以管理账号、升级科技、更多关于账号的操作尽在用户中心！</p>
        <el-button type="primary" @click="router.push('/profile')">用户中心</el-button>
      </div>

      <!-- 交易行 -->
      <div class="feature-card">
        <h2>交易行</h2>
        <p>玩家可以在交易行内购买和出售资源、单位。</p>
        <el-button type="primary" @click="router.push('/trade')">进入交易行</el-button>
      </div>

      <!-- 系统公告 -->
      <div class="feature-card">
        <h2>系统公告 <el-link type="primary" @click="router.push('/user-manual')">查看全部公告</el-link></h2>
        <ul class="announcement-list" v-for="announcement in latestAnnouncements" :key="announcement.date">
          <li><el-link @click="router.push('/user-manual')">[{{ announcement.date }}] {{ announcement.title }}</el-link></li>
        </ul>
      </div>
    </div>

    <!-- 特色功能展示 -->
    <div class="special-features">
      <div class="special-card">
        <h3>XIN计划特色</h3>
        <ul>
          <li>丰富的宇宙探索与剧情！</li>
          <li>精灵养成与对战系统。</li>
          <li>定期更新的游戏内容，包括新地图和新任务。</li>
          <li>强大的社区支持，提供各种攻略和教程。</li>
        </ul>
      </div>

      <div class="special-card">
        <h3>任务及活动</h3>
        <ul>
          <li>扩充主线任务：探索未知星系。</li>
          <li>更多主线、支线任务紧张策划中......</li>
          <li>不定时举行各种活动及比赛，超多奖励可拿！</li>
          <li>新增XIN计划2扩展包，带来更多新内容。</li>
        </ul>
      </div>

<!--       <div class="special-card">
        <h3>精灵特色</h3>
        <ul>
          <li>每个种族都有独特的单位和技能，平衡性更强！</li>
          <li>最高等级开放到100级。</li>
          <li>开放更多高级单位和技能！</li>
          <li>单位技能最高开放到109级。</li>
        </ul>
      </div>

      <div class="special-card">
        <h3>单位特色</h3>
        <ul>
          <li>取消转生设定，6级直接拥有高级单位！</li>
          <li>所有单位技能最高开放到10个。</li>
          <li>调整成长和技能，使更多单位用得上场机会。</li>
          <li>开放部分未出场的单位的获取，新增原创单位！</li>
        </ul>
      </div> -->
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'

const router = useRouter()

// 修改为数组，存储最新的三条公告
const latestAnnouncements = ref([]);

// 获取公告数据
const fetchAnnouncementsFromCDN = async () => {
  try {
    const response = await fetch('http://yd.sjcmc.cn:16578/announcements.json');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const jsonData = await response.json();
    
    // 获取前三条公告
    if (jsonData.announcements && jsonData.announcements.length > 0) {
      // 使用 slice(0, 3) 获取前三条公告
      latestAnnouncements.value = jsonData.announcements
        .slice(0, 3)
        .map(announcement => ({
          title: announcement.title,
          content: announcement.content.join('\n'),
          date: announcement.date.replace(/\./g, '-')
        }));
    }
  } catch (error) {
    console.error('获取公告数据失败:', error);
  }
};

onMounted(() => {
  // fetchAnnouncementsFromCDN();
});
</script>

<style scoped lang="scss">
.home-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.hero-section {
  background: var(--el-bg-color);
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 40px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

  h1 {
    font-size: 28px;
    color: var(--el-text-color-primary);
    margin-bottom: 20px;
  }

  .description {
    color: var(--el-text-color-regular);
    line-height: 1.8;
    margin-bottom: 30px;

    p {
      margin-bottom: 15px;
    }
  }

  .links {
    .buttons {
      margin: 20px 0;
      display: flex;
      gap: 15px;
    }

    p {
      margin: 10px 0;
      color: #606266;
    }
  }
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.feature-card {
  background: var(--el-bg-color);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

  h2 {
    font-size: 20px;
    color: var(--el-text-color-primary);
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  p {
    color: var(--el-text-color-regular);
    margin-bottom: 20px;
    line-height: 1.6;
  }
}

.announcement-list {
  list-style: none;
  padding: 0;

  li {
    margin-bottom: 10px;
    
    .announcement-link {
      display: flex;
      gap: 8px;
      cursor: pointer;
      transition: all 0.3s;
      
      .announcement-content {
        flex: 1;
        min-width: 0; // 防止flex子元素溢出
        
        .title {
          color: #303133; // 默认使用黑色
          font-size: 14px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-bottom: 2px;
        }
        
        .date {
          color: var(--el-text-color-secondary);
          font-size: 12px;
        }
      }
      
      &:hover {
        background: var(--el-color-primary-light-8);
        transform: translateX(4px);
        
        .title {
          color: var(--el-color-primary); // 悬浮时变为主题色（蓝色）
        }
      }
    }
  }
}

.no-announcement {
  color: #909399;
  text-align: center;
  padding: 10px 0;
}

.special-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.special-card {
  background: var(--el-bg-color);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

  h3 {
    font-size: 18px;
    color: var(--el-text-color-primary);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--el-color-primary);
  }

  ul {
    list-style: none;
    padding: 0;

    li {
      color: var(--el-text-color-regular);
      margin-bottom: 10px;
      line-height: 1.6;
      position: relative;
      padding-left: 20px;

      &:before {
        content: "•";
        color: var(--el-color-primary);
        position: absolute;
        left: 0;
      }
    }
  }
}

.link-item {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 10px 0;
  
  span {
    color: #606266;
    font-size: 16px;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .home-container {
    padding: 10px;
  }

  .hero-section {
    padding: 20px;

    h1 {
      font-size: 24px;
    }

    .description {
      p {
        font-size: 14px;
      }
    }

    .links {
      .buttons {
        flex-direction: column;
        gap: 10px;
      }

      p {
        font-size: 14px;
      }
    }
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .feature-card {
    padding: 15px;

    h2 {
      font-size: 18px;
    }

    p {
      font-size: 14px;
    }
  }

  .special-features {
    grid-template-columns: 1fr;
  }

  .special-card {
    padding: 15px;

    h3 {
      font-size: 16px;
    }

    ul li {
      font-size: 14px;
    }
  }

  .link-item {
    span {
      font-size: 14px;
    }
  }
}
</style>